<template>
	<!-- 确认订单 -->
	<view class="content display  displayColumn">
		<u-navbar title="个人中心" @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<view class="appoint_left display  " slot="left">
				<uni-icons type="left" size="18" color="#000"></uni-icons>
			</view>
			<view class="apponit_center display " slot="center">
				<span class="title_txt fontSize font_comm">确认订单</span>
			</view>
		</u-navbar>
		<!-- 支付方式 -->
		<view class="zhifustyle display  displayColumn width-100 M-T36 all_item">
			<view class="zhifustyle_all display  displayColumn">
				<!-- 余额 -->
				<view class="one display  displaycenter_aliem" @click="cahngeindex(1)">
					<view class="left display  displaycenter_aliem">
						<img style="margin-left: 24rpx;" class="imgs" src="@/static/img2/Group_1097.png" alt="" />
						<span class="fontSize font_comm" style="margin-left: 20rpx;">余额</span>
					</view>
					<view class="right display  all_item">
						<view :class="{circle:selectIndex!=1,circle1:selectIndex==1, display:true, all_item:true}">
							<view class="nei_circle" v-if="selectIndex==1">

							</view>
						</view>
					</view>
				</view>
				<view class="wode_line display " v-if="data.artificialServiceType == '0'"></view>
				<!-- 洗车券 -->
				<view class="one display  displaycenter_aliem" @click="cahngeindex(2)"
					v-if="data.artificialServiceType == '0'">
					<view class="left display  displaycenter_aliem">
						<img style="margin-left: 24rpx;" class="imgs" src="@/static/img/weixinlogo.png" alt="" />
						<span class="fontSize font_comm" style="margin-left: 20rpx;">洗车券（2张洗车券）</span>
					</view>
					<view class="right display  all_item">
						<view :class="{circle:selectIndex!=2,circle1:selectIndex==2, display:true, all_item:true}">
							<view class="nei_circle" v-if="selectIndex==2">

							</view>
						</view>
					</view>
				</view>
				<view class="wode_line display "></view>
				<!-- 微信支付 -->
				<view class="one display  displaycenter_aliem" @click="cahngeindex(3)">
					<view class="left display  displaycenter_aliem">
						<img style="margin-left: 24rpx;" class="imgs" src="@/static/img2/weixin.png" alt="" />
						<span class="fontSize font_comm" style="margin-left: 20rpx;">微信支付</span>
					</view>
					<view class="right display  all_item">
						<view :class="{circle:selectIndex!=3,circle1:selectIndex==3, display:true, all_item:true}">
							<view class="nei_circle" v-if="selectIndex==3">

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部导航 -->
		<view class="bottom_tabber display displayColumn">
			<view class="bottom_tabber_one  display M-T16">
				<view class="left_text display  displaycenter_aliem M-L30">
					<span class="fontSize font_comm">金额:</span>
					<span class="fontSize font_comm"> ￥{{data.washOrderAmount}}</span>
				</view>
				<view class="right_button display  displaycenter_aliem M-R30">
					<button class="display all_item" @click="paymonet">立即支付</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import card from './card.vue'
	export default {
		components: {
			card
		},
		data() {
			return {
				selectIndex: 1, //余额 1洗车券 2微信支付
				data: {},
				ids:''
			}
		},
		onLoad(option) {
			// this.info = option.info;
			this.data = JSON.parse(option.data);
			console.log(this.data);
		},
		methods: {
			otherFun(id){
				// console.log(id)
				this.ids = id.ids;
			},
			cahngeindex(index) {
				this.selectIndex = index;
				// 将类型传入data
				console.log(index)
				if(this.selectIndex == 2){
					uni.navigateTo({
						url:'/packageB/selectXiche/selectXiche'
					})
				}
			},
			// 为了截留防抖
			paymonet() {
				uni.$u.throttle(this.cashout, 500)
			},
			// 立即支付
			cashout() {
				this.$modal.msg('正在加载')
				console.log(this.selectIndex)
				console.log(this.data)
				if (this.selectIndex == 1) {
					// 余额
					this.data.payType = 2
				} else if (this.selectIndex == 3) {
					// 微信支付
					this.data.payType = 3
				} else {
					// 洗车券支付/
					this.data.payType = 4
					this.data = {
						...this.data,
						prePayCouponss:this.ids
					}
				}
				console.log(this.data);
				// 精洗车
				if (this.data.artificialServiceType == '1') {
					// 请求接口
					this.$req.post('/pay/reservationOrder', this.data).then(res => {
						console.log(res)
						this.$modal.closeLoading()
						if (res.data.code == '200') {
							this.$modal.showToast(res.data.msg);
							if (this.selectIndex == 1) {
								// 余额支付 直接跳转
								uni.reLaunch({
									url:'/pages/index/index'
								})
								
								// this.$tab.navigateTo(
								// 	`/packageB/appointStatus/appointStatus?id=${res.data.data.id}`)
							} else {
								// 微信支付
								// 吊起来微信
								this.weixinLogin(res.data.data, res.data.data.id)
							}
						} else {
							this.$modal.showToast(res.data.msg);
						}
					})
				} else {
					console.log(this.data,'1111')
					// 普洗
					this.$req.post('/pay/reservationOrder', this.data).then(res => {
						console.log(res)
						
						if (res.data.code == '200') {
							// this.$modal.showToast(res.data.msg);
							if (this.selectIndex == 1||this.selectIndex==2) {
								// 余额支付 直接跳转
								// this.$tab.navigateTo(`/packageB/orderDetails/orderDetails?id=${res.data.data.id}`)
								uni.reLaunch({
									url:'/pages/index/index'
								})
							} else {
								// 微信支付
								// 吊起来微信
								this.weixinLogin(res.data.data, res.data.data.id)
							}
						} else {
							this.$modal.showToast(res.data.msg);
						}
						
					})
				}
				// 支付成功后跳转状态页面
				// this.$tab.navigateTo('/packageB/appointStatus/appointStatus')
			},
			// 微信支付
			weixinLogin(data, id) {
				console.log(data)
				let that = this
				uni.requestPayment({
					"timeStamp": `${data.timeStamp}`,
					"nonceStr": data.nonceStr,
					"package": data.packages,
					"signType": data.signType,
					"paySign": data.paySign,
					success(res) {
						console.log(res)
						// 支付成功  跳转
						if(that.data.artificialServiceType == '1'){
							uni.reLaunch({
								url:'/pages/index/index'
							})
							// that.$tab.navigateTo(`/packageB/appointStatus/appointStatus?id=${id}`)
						}else{
							uni.reLaunch({
								url:'/pages/index/index'
							})
							// that.$tab.navigateTo(`/packageB/orderDetails/orderDetails?id=${id}`)
						}
						
					},
					fail(e) {
						console.log(e)
					}
				})
			}
		}
	}
</script>
<style>
	page {

		background: #F4F5FA;

	}
</style>
<style scoped lang="scss">
	.M-T16 {
		margin-top: 16rpx;
	}

	.M-T30 {
		margin-top: 30rpx;
	}

	.M-T36 {
		margin-top: 36rpx;
	}

	.M-L30 {
		margin-left: 30rpx;
	}

	.M-R30 {
		margin-right: 30rpx;
	}

	.content {
		width: 100%;
		min-height: 100vh;
	}

	.title_txt {
		font-size: 32rpx;
		font-weight: Semibold;
		color: #212121;

	}

	.zhifustyle_all {
		width: 690rpx;
		height: 292rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		.one {
			flex: 1;
			justify-content: space-between;

			.left {
				height: 100%;
				min-width: 150rpx;

				span {
					font-weight: 600;
					font-size: 30rpx;
					color: #000000;
				}
			}

			.right {
				width: 100rpx;
				height: 100%;

				.circle1 {
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					border: 2rpx solid #126BC9;

					.nei_circle {
						width: 24rpx;
						height: 24rpx;
						background: #126BC9;
						border-radius: 50%;
					}
				}

				.circle {
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					border: 2rpx solid #999999;

					.nei_circle {
						width: 24rpx;
						height: 24rpx;
						background: #126BC9;
						border-radius: 50%;
					}
				}
			}
		}
	}

	.imgs {
		width: 40rpx;
		height: 40rpx;
	}

	.wode_line {
		width: 642rpx;
		height: 0rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 2rpx solid #F6F6F6;
		margin-left: 24rpx;
	}

	.bottom_tabber {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 166rpx;
		background: rgba(255, 255, 255, 0.8);
		box-shadow: 0rpx -6rpx 47rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.bottom_tabber_one {
			width: 100%;
			height: 66rpx;
			justify-content: space-between;

			.bottom_tabber_one {
				height: 100%;
			}

			.right_button {
				height: 100%;

				button {
					width: 406rpx;
					height: 66rpx;
					background: #126BC9;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					font-weight: 600;
					font-size: 24rpx;
					color: #FFFFFF;

				}
			}

			.left_text {
				height: 100%;

				:nth-child(1) {
					font-weight: 600;
					font-size: 20rpx;
					color: #FF672D;
				}

				:nth-child(2) {
					font-weight: 600;
					font-size: 26rpx;
					color: #FF672D;
				}
			}
		}
	}
</style>